<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础语法</title>
    <!-- 导入css文件 -->
     <link rel="stylesheet" href="css/css_01基础语法.css">
</head>
<body>
    <h2>CSS层叠样式</h2>
    <h3>标签选择器</h3>
    <button > 搜索</button>
    <button > 取消</button>
    <!-- 首页的搜索引擎，样式唯一 -->
    <h3>id选择器</h3>
    <input id="serch_ipt" type="text">
    <!-- 样式在多处使用 -->
    <h3>class类选择器</h3>
    <a href="" class="service_link">100%正品</a>
    <a href="" class="service_link">88元免邮</a>
    <a href="" class="service_link">退货无忧</a>
    <!-- 后代选择器 -->
    <p class="p1">
        这是一段文字
        <span>这是一段文字</span>
        <strong>这是一段文字</strong>
    </p>
    <br>

    <b id="b1">bbbbbbbbb</b>
    <strong class="c1">bbbbbbbbb</strong>
    <em class="e1" >eeeeeeeeee</em>
    <i class="i1">iiiiiiiiii</i>

    <div class="d1"></div>

    
    <div class="d2 circle1"></div> <!-- 既有d2的样式，也有circle1的样式 -->
    <div class="d2 circle2"></div> <!-- 既有d2的样式，也有circle2的样式 -->
    <div class="d2 circle3"></div> <!-- 既有d2的样式，也有circle3的样式 -->

    <audio src=""></audio>

<!-- 权重值
    id选择器：100     class选择器：10     标签选择器：1
    id选择器 > class选择器  > 标签选择器
    #head4 .myhead{} 权重值=100+10
-->
    <h4 id="head4" class="myhead">
        权重值
    </h4>

</body>
</html>